<template>
    <div class="product-wrap">
        <van-nav-bar class="header fixed" left-text="返回" left-arrow @click-left="navBack" style="z-index: 99" />
        <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for=" (image,index) in images " :key="index">
                <img style="hieght: 350px;width: 100%;" :src="image">
            </van-swipe-item>
        </van-swipe>
        <div v-if="images == null" style="width: 100%;height:300px;line-height: 300px;">
            <h1 style="text-align:center;">暂无图片</h1>
        </div>
        <div class="product-info clearfix">
            <div class="msg l">
                <span class="price">¥{{ goodsInfo.price }}</span>
                <span class="original_price">¥{{ goodsInfo.original_price }}</span>
            </div>
            <div class="like r">
                <div class="item">
                    <van-icon name="like-o" /><span>关注</span>
                </div>
                <div class="item">
                    <van-icon name="refund-o" /><span>降价提醒</span>
                </div>
            </div>
        </div>
        <!-- <div class="title">{{ goodsInfo.sort_title }}</div>
        <div class="sub-title">
            <p>{{ goodsInfo.title }}</p>
        </div> -->
        <van-cell-group>
            <!-- <van-cell>
                <div slot="title">
                    <span style="color: #999">已选</span>
                    <span>黑色</span>
                </div>
                <van-icon slot="right-icon" name="ellipsis" style="line-height: inherit;" />
            </van-cell> -->
            <van-cell>
                <div slot="title" class="detail_serve_item">
                    <van-icon name="checked" />平台发货 & 商家发货
                </div>
                <van-icon slot="right-icon" name="ellipsis" style="line-height: inherit;" />
            </van-cell>
        </van-cell-group>
        
        <div class="store" v-if="type == 'store' && storeInfo != null">
            <van-row>
                <van-col span="4">
                    <van-image width="50" height="50" :src=" storeInfo.avatar ? storeInfo.avatar : 'https://img.yzcdn.cn/vant/cat.jpeg'" round />
                </van-col>
                <van-col span="20">
                    <div class="title">{{ storeInfo.title }}</div>
                    <div class="name">店铺等级
                        <van-rate :value="storeInfo.vip " size="10" color="#e93b3d" readonly /> </div>
                </van-col>
            </van-row>
        </div>
        <van-tabs style="padding-bottom: 50px;" v-model="active">
            <van-tab title="商品介绍">
            </van-tab>
            <van-tab title="产品规格">暂无</van-tab>
            <van-tab title="售后保障" style="background-color: white;padding:10px 15px;">
        <van-divider>权利声明</van-divider>
        <p style="display: block;">无忧商城上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是无忧商城重要的经营资源，未经许可，禁止非法转载使用。</p>
        <van-divider>价格声明</van-divider>
        <p>商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。</p>
      </van-tab>
        </van-tabs>
        <!-- Start 商店信息 store -->
        <div class="footer fixed" style="z-index: 99">
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" @click="getservice" />
                <!-- <van-goods-action-icon icon="cart-o" text="购物车" @click="cart" /> -->
                <!-- <van-goods-action-button type="warning" text="加入购物车" @click="getcart" /> -->
                <!-- <van-goods-action-button type="danger" text="立即购买" @click="getBuy" /> -->
                <van-goods-action-button type="danger" text="立即购买" @click="goodsShow = true" />
            </van-goods-action>
        </div>
        <van-sku
        v-model="goodsShow"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId"
        :hide-stock="sku.hide_stock"
        :message-config="messageConfig"
        @buy-clicked="getBuy"
        />
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    name: "Product",
    data() {
        return {
            active: 0,
            type: null,
            goodsShow: false,
            goods:null,
            goodsInfo: null,
            storeInfo: null,
            goodsId: null,
            goodsImages: [],
            images: [],
            addCardShow:false,
             sku:{
                tree: [
                ],
                list: [
                ],
                hide_stock: false
            },
            messageConfig: null
        }
    },
    created(){
        this.type = this.$route.query.type;
        let goods = this.global.state.productStore_goods;
        if(this.$route.query.type == 'store'){
            this.getStoreInfo(this.$route.query.store_id);
        }
        this.images = JSON.parse(this.global.state.productStore_goods.images);
        this.goodsInfo = this.global.state.productStore_goods;
        this.fnGoods(goods)
    },
    mounted() {
    },
    methods: {
        navBack() {
            this.$router.go(-1);
        },
        getservice() {
            //客服
            Toast('暂无此功能');
        },
        car() {
            this.$router.push({ name: 'cart', path: '../cart' });
        },
        getcart() {
            this.addCardShow = true;
        },
        getBuy() {
            let storeInfo = this.storeInfo;
            let goodsInfo = this.goodsInfo;
            this.global.state.singleGoods = goodsInfo;
            this.$router.push({ name: 'orderSubmit', path: '../order/submit' });
        },
        fnGoods(goods){
            this.goodsId = goods.id;
            this.messageConfig =  goods.remark;
            this.goods = {
                title : goods.title,
                picture : goods.avatar
            };
            this.formatType(goods.type);
            this.formatPrice(this.goodsInfo.spec_price,'price');
        },
        formatPrice(data,type){
          let newData = [];
          Object.keys(data).forEach((key)=>{
            let spec = data[key].spec.substring(0,data[key].spec.length-1)
            let specData = spec.split(',');
            if(type === 'price'){
              let si = {
                id:data[key].id,
                price: data[key].price * 100,
                stock_num: data[key].count ? data[key].count : 999
              }
              specData.forEach((v,i)=>{
                si['s'+i] = v;
              }) 
               newData.push(si);
            }
           
          })
           this.sku.list = newData;
        },
        formatType(data){
          let newData = [];
          Object.keys(data).forEach((key)=>{
            let spec =[];
            Object.keys(data[key].spec).forEach((i)=>{
              let sp = {
                id:data[key].spec[i].title,
                name:data[key].spec[i].title
              } 
              spec.push(sp)
            })
            let item = {
              k:data[key].title,
              v:spec,
              k_s:'s'+key
            }
            newData.push(item);
          })
          this.sku.tree = newData;
        },
        getStoreInfo(store_id){
            this.axios.get('/api/store/user/store_info/'+store_id).then(r=>{
                this.storeInfo = r.data.data;
            }).catch(err=>{
                console.log(err)
            })
        }
    }
};
</script>
<style scoped>


.product-wrap .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0
}

.product-wrap .title {
    font-size: 15px;
    font-weight: 600;
    padding: 0 12px;
    background: white;
    box-sizing: border-box;
}

.product-wrap .sub-title {
    font-size: 12px;
    padding: 0 12px;
    background: white;
    box-sizing: border-box;
    color: #999;
    margin-bottom: 5px;
}

.product-wrap .sub-title p {
    padding: 0.25rem 0;
    margin: 0;
}

.product-info {
    box-sizing: border-box;
    padding: 10px 12px;
    background: white;
    line-height: 24px;
}

.product-info .like {
    max-width: 150px;
}

.product-info .msg .price {
    font-size: 24px;
    line-height: 24px;
    color: #ff4240;
}

.product-info .msg .original_price {
    text-decoration: line-through;
    color: #999;
}

.product-info .item {
    text-align: center;
    display: inline;
    margin: 0 5px;
    line-height: 12px;
}

.product-info .item span {
    color: #999;
    font-size: 12px;
}

.product-info .item p {
    margin: 0;
}

.detail_serve_item i {
    color: #ff4240;
}

.evaluate-header {
    background: white;
    padding: 0 12px 5px;
}

.evaluate-header-item {
    margin: 0 10px 10px 0;
    background: #fdf0f0;
    display: inline-block;
    margin: 5px 5px 0 5px;
    padding: 0 10px;
    height: 25px;
    border-radius: 3px;
    line-height: 25px;
    font-size: 10px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
}

.evaluate-item {
    box-sizing: border-box;
    padding: 0 12px;
    margin: 10px 0 5px;
}

.evaluate-item-header,
.evaluate-item-header .time {
    line-height: 20px;
}

.evaluate-item-header .name,
.evaluate-item-header .i {
    padding-left: 5px;
    vertical-align: 50%;
}

.evaluate-item-header .van-rate {
    padding-left: 5px;
    display: inline-block;
    vertical-align: 50%;
}

.evaluate-item-container p {
    margin: 0;
}

.evaluate-item-container img {
    display: inline-block;
    max-width: 19%;
    margin-right: 1%;
}

.product-wrap .all {
    text-align: center;
}

.product-wrap .all span {
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid #666;
    line-height: 14px;
    vertical-align: 70%;
}

.product-wrap .store {
    box-sizing: border-box;
    background: white;
    padding: 5px 12px;
    margin: 5px 0;
}

.store .title {
    padding: 0;
}

.store .name div {
    display: inline-block;
}

.store .info div p {
    margin: .25rem 0;
    text-align: center;
}

.store .info .info p {
    text-align: center;
    font-size: 12px;
}

.store-tool div button {
    display: block;
    width: 98%;
    margin: 0 2%;
}
</style>
